<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>
        Track widget simulation | Sample | ArcGIS API for JavaScript 4.18
    </title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        /*去除X关闭窗口的按钮*/
        .esri-popup__header{
            visibility: hidden;!important;
            height: 0;
            background-color: red;!important;
        }

        /*调整窗口的大小*/
        .esri-view-width-xlarge .esri-popup__main-container{
            height: 300px;
            width: 500px;
            background-color: #4c4c4c;
        }

        /*去除指向箭头*/
        .esri-popup__pointer{
            display: none;
        }
    </style>
    <link href="https://js.arcgis.com/4.18/esri/themes/light/main.css" rel="stylesheet"/>

    <script>
        var dojoConfig = {
            packages: [
                {
                    name: "geolocate",
                    location: "//2gis.github.io/mock-geolocation/dist",
                    main: "geolocate"
                }
            ]
        };
    </script>

    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "geolocate", //地理定位模拟器 (https://github.com/2gis/mock-geolocation)
            "esri/widgets/Track", "esri/views/SceneView", "esri/Map"
        ], function (geolocate, Track, SceneView, Map) {
            //地理定位模拟器
            stubGeolocation();

            var map = new Map({
                basemap: "topo-vector"
            });

            var view = new SceneView({
                map: map,
                container: "viewDiv",
                center: [-117.187038, 34.057322],
                zoom: 18,
                popup: {
                    actions: [],//去除缩放按钮
                    dockEnabled: false,//指示弹出窗口的位置是否停靠在视图的一侧。
                    dockOptions: {
                        buttonEnabled: false,//是否显示停靠按钮
                        breakpoint: {
                            width: 200,
                            height: 100
                        }
                    }
                }
            });

            //跟踪小部件
            var track = new Track({
                view: view,
                //指示当找到地理定位结果时，小部件是否会自动将视图导航到用户的位置。
                goToLocationEnabled: false
            });

            view.when(function () {
                //获取视图中心的位置
                var prevLocation = view.center;

                track.on("track", function () {
                    var location = track.graphic.geometry;
                    view.goTo({
                        center: location,
                        tilt: 50,
                        scale: 2500,
                        heading: 360 - getHeading(location, prevLocation), //仅适用于 SceneView
                    })
                    prevLocation = location.clone();

                    let popup = {
                        content: '<div><img src="http://n.sinaimg.cn/news/transform/700/w1000h500/20210316/51c0-kmkptxe0299440.jpg" style="overflow: hidden;width: 100%;height: 100%"/></div>',
                        updateLocationEnabled: true,
                        location:location,
                    };
                    view.popup.open(popup);
                });
                //执行时，小部件将开始跟踪用户的位置
                track.start();
            });

            function getHeading(point, oldPoint) {
                //获取两点之间的角度
                var angleInDegrees =
                    (Math.atan2(point.y - oldPoint.y, point.x - oldPoint.x) * 180) /
                    Math.PI;

                //向北移动
                return -90 + angleInDegrees;
            }

            //地理定位模拟器
            function stubGeolocation() {
                var coords = [
                        {
                            lat: 34.05648363780692,
                            lng: -117.19565501782613
                        },
                        {
                            lng: -117.19565880345007,
                            lat: 34.05682230352545
                        },
                        {
                            lng: -117.19566258907402,
                            lat: 34.05716096924398
                        },
                        {
                            lng: -117.19566637469796,
                            lat: 34.05749963496251
                        },
                        {
                            lng: -117.19567016032191,
                            lat: 34.05783830068104
                        },
                        {
                            lng: -117.19567394594586,
                            lat: 34.05817696639957
                        },
                        {
                            lng: -117.1956777315698,
                            lat: 34.0585156321181
                        },
                        {
                            lng: -117.19568151719375,
                            lat: 34.05885429783663
                        },
                        {
                            lng: -117.1956853028177,
                            lat: 34.05919296355516
                        },
                        {
                            lat: 34.059192963555134,
                            lng: -117.19568530281771
                        },
                        {
                            lat: 34.05920092649827,
                            lng: -117.19575894615099
                        },
                        {
                            lng: -117.19575574232981,
                            lat: 34.058861053180614
                        },
                        {
                            lng: -117.19575253850863,
                            lat: 34.05852117986296
                        },
                        {
                            lng: -117.19574933468745,
                            lat: 34.0581813065453
                        },
                        {
                            lng: -117.19574613086627,
                            lat: 34.057841433227644
                        },
                        {
                            lng: -117.19574292704509,
                            lat: 34.05750155990999
                        },
                        {
                            lng: -117.19573972322391,
                            lat: 34.05716168659233
                        },
                        {
                            lng: -117.19573651940273,
                            lat: 34.056821813274674
                        },
                        {
                            lng: -117.19573331558155,
                            lat: 34.05648193995702
                        },
                        {
                            lat: 34.05648193995701,
                            lng: -117.19573331558153
                        },
                        {
                            lng: -117.19569416670383,
                            lat: 34.056482788881965
                        },
                        {
                            lng: -117.19565501782613,
                            lat: 34.05648363780692
                        },
                        {
                            lng: -117.19565501782613,
                            lat: 34.05648363780792
                        },
                        {
                            lng: -117.19565501782613,
                            lat: 34.05648363780892
                        }
                        ,
                        {
                            lng: -117.19565501782613,
                            lat: 34.05648363780992
                        }
                    ],
                    currentCoordIndex = 0;

                geolocate.use();

                setInterval(function () {
                    geolocate.change(coords[currentCoordIndex]);
                    currentCoordIndex = (currentCoordIndex + 1) % coords.length;
                }, 1500);
            }
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
